<template>
  <div
    class="tab_child hw-box-style-flex hw-box-style-flex-r-center hw-click-cursor"
    :class="{ tab_child_check: check == props.info.value }"
    @click="clickTab(props.info.value)"
  >
    <t-icon :name="props.info.icon" v-if="props.info.icon" class="tab-icon" />
    <span>{{ props.info.title }}</span>
  </div>

  <!-- <t-divider v-if="props.info.solid"></t-divider> -->
</template>

<script setup lang="ts">
// @ts-nocheck
// const props = defineProps<{
//   check: Number;
//   info: object;
// }>();
const props = defineProps({
  check: {
    type: Number,
  },
  info: {
    type: Object,
  },
});
const emit = defineEmits(['handleClick']);
const clickTab = (e: number): void => {
  emit('handleClick', e);
};
</script>

<style lang="less" scoped>
.tab_child {
  width: 100%;
  height: 48px;
  padding-left: 10px;
  border-radius: @radius-hw-box1;
}
.tab_child_check {
  background-color: @color-child-item;
  color: @color-text-color;
}
.tab-icon {
  margin-right: 10px;
}
.tab_child_delet {
  margin-top: 30px;
}
</style>
